<template>
    <div class="hotcity">
        <p>热门城市</p>
        <ul>
            <li v-for="(item,key) in hotCityList" :key="key" @click="$emit('click',item.city)">{{item.city}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "hotcity",
        props:{
            hotCityList:Array
        }
    }
</script>

<style lang="scss" scoped>
    @import "~css/varibles.scss";
    .hotcity {
        > p {
            padding: .24rem 0 .24rem .2rem;
            background-color: $bgcolor-p;
            border-bottom: #dadada 1px solid;
        }
        >ul{
            padding: 0.1rem .6rem .4rem .14rem;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
            li{
                color:#a1a1a1;
                margin-top: .3rem;
                line-height: .4rem;
                display: block;
                width: 30%;
                border:1px solid #cecece;
                border-radius:.08rem;
                text-align: center;
            }
            &:after{
                content: '';
                width: 30%;
                border:1px solid transparent;
            }
        }
    }
</style>
